<template>
  <div>
    <div class="header fda">
      <div class="logotxt">
        <img src="../assets/xwylogo.png" alt="" />
        <span>江苏弦外音智造科技有限公司</span>
      </div>
      <div class="header_right fda">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#000"
          text-color="#fff"
        >
          <el-menu-item index="1">
            <router-link to="/">首页</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/brief"> 公司简介 </router-link>
          </el-menu-item>
          <el-menu-item index="3"><router-link to="/give">服务内容</router-link></el-menu-item>
          <el-menu-item index="4"> 成功案例 </el-menu-item>
          <el-menu-item index="5"><router-link to="/cooperate?id=1">合作机构</router-link></el-menu-item>
          <el-menu-item index="6"
            ><router-link to="/news?id=1">新闻资讯</router-link></el-menu-item
          >
          <el-menu-item index="7">
            <router-link to="/contact?id=1">在线合作</router-link>
          </el-menu-item>
          <el-menu-item index="8">
            <router-link to="/legal">法务服务</router-link>
          </el-menu-item>
        </el-menu>
        <div class="put" style="display: flex">
          <el-input placeholder="请输入内容" v-model="input4">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
    </div>
    <div class="block">
      <el-carousel height="7rem" :autoplay="false">
        <el-carousel-item v-for="item in list" :key="item">
          <img style="width: 100%" :src="item.image" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="box">
      <div class="biaoti">
        <span style="margin-right: 0.24rem; font-weight: 600">成功案例</span
        ><span>/ success cases</span>
      </div>
      <div class="tab">
        <el-radio-group
          v-model="tabPosition"
          fill="#333333"
          @change="clickChange"
        >
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="shuzi">自研产品</el-radio-button>
          <el-radio-button label="pingpai">科技成果转化</el-radio-button>
          <el-radio-button label="yidong">内容制作</el-radio-button>
        </el-radio-group>
      </div>
      <div class="fdc box_nei" v-if="tabPosition == 'all'">
        <div class="list" v-for="item in anli" :key="item.id">
          <div class="tu fdb">
            <img :src="item.image" alt="" />
          </div>
          <div class="name">{{ item.title || "--" }}</div>
        </div>
      </div>
      <div class="fdc box_nei" v-if="tabPosition == 'shuzi'">
        <div class="list" v-for="item in shuzi">
          <div class="tu fdb">
            <img :src="item.image" alt="" />
          </div>
          <div class="name">{{ item.title || "--" }}</div>
        </div>
      </div>
      <div class="fdc box_nei" v-if="tabPosition == 'pingpai'">
        <div class="list" v-for="item in pinpai">
          <div class="tu fdb">
            <img :src="item.image" alt="" />
          </div>
          <div class="name">{{ item.title || "--" }}</div>
        </div>
      </div>
      <div class="fdc box_nei" v-if="tabPosition == 'yidong'">
        <div class="list" v-for="item in yidong">
          <div class="tu fdb">
            <img :src="item.image" alt="" />
          </div>
          <div class="name">{{ item.title || "--" }}</div>
        </div>
      </div>
      <!-- <div class="fdc box_nei" v-if="tabPosition == 'yingxiao'">
        <div class="list" v-for="item in yingxiao">
          <div class="tu fdb">
            <img :src="item.image" alt="" />
          </div>
          <div class="name">{{ item.title || "--" }}</div>
        </div>
      </div> -->
    </div>
    <!-- <div class="fy">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div> -->
    <div class="footer">
      <div class="fd nei">
        <div class="footer_left">
          <img src="../assets/logohui.png" class="logohui" alt="" />
          <p style="margin: 0.12rem auto">©江苏弦外音智造科技有限公司</p>
          <p>京ICP证888888号</p>
        </div>
        <div>
          <p style="font-size: 0.17rem; font-weight: 600">
           <a href="https://www.amap.com/search?query=%E5%8D%97%E4%BA%AC%E5%B8%82%E6%A0%96%E9%9C%9E%E5%8C%BA%E5%85%B4%E6%99%BA%E7%A7%91%E6%8A%80%E5%9B%ADA%E5%BA%A711%E6%A5%BC&city=320000&geoobj=117.784963%7C31.496393%7C120.311263%7C32.627805&zoom=9.65">地址：南京市栖霞区兴智科技园A座11楼</a> 
          </p>
          <p style="margin: 0.14rem auto">
            微信：19996669669
          </p>
          <p><a href="tel:19996669669">全国24小时服务热线：199 9666 9669</a></p>
          <p style="margin-top: 0.13rem"><a href="https://mail.163.com/">商务合作邮箱：m19996669669@163.com</a> </p>
        </div>
        <div>
          <img class="footer_ma" src="../assets/ma.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { banner, documentation } from "@/api/user";
export default {
  data() {
    return {
      list: [],
      input4: "",
      tabPosition: "all",
      queryForm: {
        type: 1,
      },
      anli: {},
      shuzi: [],
      pinpai: [],
      yidong: [],
      yingxiao: [],
    };
  },
  created() {},
  mounted() {
    var that = this;
    banner(that.queryForm).then((response) => {
      console.log(response);
      that.list = response.rows;
    });
    documentation(that.anli).then((response) => {
      console.log(response);
      that.anli = response.rows;
      for (let i = 0; i < that.anli.length; i++) {
        switch (that.anli[i].types) {
          case "数字化品牌":
            that.shuzi.push(that.anli[i]);
            break;
          case "品牌视觉":
            that.pinpai.push(that.anli[i]);
            break;
          case "移动终端":
            that.yidong.push(that.anli[i]);
            break;
          case "数字营销":
            that.yingxiao.push(that.anli[i]);
            break;
        }
      }
      console.log(that.shuzi, "that.shuzi");
    });
  },
  methods: {
    clickChange(lab) {
      console.log(lab, "123");
      this.tabPosition = lab;
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 返回上一层
    go() {
      this.$router.go(-1);
    },
    // // 查看用户
    handleCha() {
      this.$router.push({
        name: "/school",
        // query: { classId: row.id, schoolId: row.schoolId, name: row.name },
      });
    },
  },
};
</script>
 
<style  lang="less" scoped>
/deep/.el-menu-item {
  font-size: 0.14rem;
  padding: 0 0.2rem;
  cursor: pointer;
}
/deep/.el-input__inner {
  border-radius: 1rem !important;
}
/deep/.el-submenu__title {
  font-size: 0.14rem;
  color: #303133;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
}
/deep/.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 0.6rem;
  line-height: 0.6rem;
  margin: 0;
  border-bottom: 0.02rem solid transparent;
  color: #909399;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 0.6rem;
  line-height: 0.6rem;
  border-bottom: 0.02rem solid transparent;
  color: #909399;
}
/deep/.el-radio-button__inner:hover {
  color: #aaaaaa !important;
}
.tab {
  margin: 0.51rem 0 0.42rem 0;
  text-align: center;
}
.fy {
  text-align: center;
}
.el-menu.el-menu--horizontal {
  border: none !important;
}
.el-input__inner {
  border-radius: 1rem !important;
}

.header {
  width: 100%;
  padding: 0.19rem 0.32rem;
  box-sizing: border-box;
  background-color: #000000;
  color: #fff;
  .logotxt {
    display: flex;
    align-items: center;
    font-size: 0.26rem;
    font-weight: 600;
    img {
      width: 0.44rem;
      margin-right: 0.12rem;
    }
  }
  .header_right {
    .put {
      width: 1.8rem;
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 0.14rem;
  opacity: 0.75;
  line-height: 1.5rem;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.box {
  padding: 0.8rem 0;
  box-sizing: border-box;
  .biaoti {
    font-size: 0.32rem;
    text-align: center;
  }
  .box_nei {
    width: 90%;
    margin: 0 auto;
    margin-top: 0.63rem;
    font-size: 0.21rem;
    .list {
      width: 19%;
      margin: 0 0.12rem 0.12rem 0;
      img {
        min-height: 1.8rem;
        object-fit: cover;
        width: 100%;
      }
      .name {
        font-size: 0.21rem;
        background-color: #f6f6f6;
        padding: 0.23rem 0.24rem;
        box-sizing: border-box;
      }
    }

    // .sp {
    //   width: 45%;
    //   height: 23.5vw;
    //   border-radius: 1vw;
    //   min-height: 3.61rem;
    //   video {
    //     width: 100%;
    //     height: 100%;
    //   }
    // }
    // .txt {
    //   width: 45%;
    // }
  }
}

.footer {
  width: 100%;
  background-color: #f6f6f6;
  padding: 0.54rem 0;
  box-sizing: border-box;
}
.nei {
  width: 70%;
  margin: 0 auto;
  text-align: left;
  color: #484848;
  font-size: 0.15rem;
}

.footer_ma {
  width: 1.2rem;
}
.logohui {
  width: 0.56rem;
}
</style>